<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<html>
<head>

    <style type="text/css">
        select{width: 150px;height:250px}
    </style>
</head>
<body>

    <h2 class="blue ai">下拉列表内容左右移动</h2>
    <select id="fuJian" multiple="multiple">
        <option>福州</option>
        <option>厦门</option>
        <option>漳州</option>
        <option>泉州</option>
    </select>
    <select id="guangDong" multiple="multiple">
        <option>广州</option>
        <option>深圳</option>
        <option>东莞</option>
        <option>惠州</option>
    </select>
    <br>
    <input type="button" onclick="toRight()" value="-->">
    <input type="button" onclick="toRightAll()" value="==>">
    <input type="button" onclick="toLeft()" value="<--">
    <input type="button" onclick="toLeftAll()" value="<==">
</body>
</html>

<script type="text/javascript">
    //在加载时间里边给option项目设置双击时间，被双击移动到对方
    $().ready(function () {
        //双击判断当前父级节点，再做节点跳转
        $('option').dblclick(function () {
            if (this.parentNode.id == 'fuJian'){
                $(this).appendTo($('#guangDong'))
            }else {
                $(this).appendTo($('#fuJian'))
            }
        })
    })
    function toRight() {
        $('#fujian option:selected').appendTo($('#guangDong'))

        console.log($('#fujian option:selected').html())
    }
    function toRightAll() {
        $('#fuJian option').appendTo($('#guangDong'))
    }

    function toLeftAll() {
        $('#guangDong option').appendTo($('#fuJian'))
    }

</script>
